import React, { Component } from 'react';
// 类组件
// 组件的名称是大写字符开头（无论类组件还是函数组件）
// 类组件需要继承自React.Component
// 类组件必须实现render函数
class Cpn1 extends Component {
    // 组件将要被移除的时候，就会回调
    componentWillUnmount() {
        console.log("组件被移除");
    }
    render() {
        return (
            <div>
                <div>类组件</div>
            </div>
        )
    }
}

// 函数组件
/**
 * 函数式组件的特点:
 *  1.没有this对象
 *  2.没有内部状态（state）
 *  3. 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
 */
function Cpn2() {
    return (<div>函数式组件</div>)
}


export default class Cpn extends Component {
    constructor() {
        super();
        this.state = {
            num: 0,
            isShow: true
        }
    }
    increment() {
        this.setState({
            num: this.state.num + 1
        })
    }
    changeCpn() {
        this.setState({
            isShow: !this.state.isShow
        })
    }
    render() {
        console.log("执行了Cpn的render方法");
        return (
            <div>
                <h2>组件</h2>
                <button onClick={() => this.increment()}>点击修改值</button>
                <button onClick={() => this.changeCpn()}>切换</button>
                {this.state.isShow && <Cpn1 />}
                <Cpn2 />
            </div>
        )
    }
    // 组件已经挂载到DOM上时，就会回调
    componentDidMount() {
        console.log("执行了组件的componentDidMount方法");
    }
    // 组件已经发生了更新时，就会回调
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("执行了组件的componentDidUpdate方法");
    }
}